import {useState} from 'react';
import {StatisticCard} from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import {PageContainer} from "@ant-design/pro-layout";
import ProForm, {ProFormDatePicker, ProFormRadio} from '@ant-design/pro-form';
import {Button, Form, Image, Input, Select, Space} from "antd";
import ProTable from "@ant-design/pro-table";

export default () => {
  const {Option} = Select;
  const imgStyle = {
    display: 'block',
    width: 42,
    height: 42,
  };
  const selectBefore = (
    <Select defaultValue="1" className="select-before">
      <Option value="1">请选择</Option>
      <Option value="2">全部</Option>
      <Option value="3">星海公寓</Option>
    </Select>
  );
  type LayoutType = Parameters<typeof ProForm>[0]['layout'];
  const columns = [
    {
      title: '订单号',
      dataIndex: 'index',
      align: "center",
      search: false,
      width: 140,
    },
    {
      title: '用户信息',
      dataIndex: 'name',
      search: false,
      align: "center",
      width: 150,
    },
    {
      title: '推荐人信息',
      dataIndex: '',
      search: false,
      align: "center",
      width: 150,
    },

    {
      title: '商品信息',
      search: false,
      width: 400,
      render: () => {
        return (
          <div style={ {display: "flex"} }>
            <Image
              width={80}
              src='https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
            />
            <div style={ {marginLeft: '10px'} }>
              的萨芬建瓯拉萨大家发拉贾克斯多方了解啊圣诞节分厘卡时间的浪费空间啊圣诞快乐
            </div>
          </div>
        );
      }
    },

    {
      title: '实际支付',
      dataIndex: 'money',
      align: "center",
      search: false,
    },
    {
      title: '核销员',
      dataIndex: 'Verifier',
      align: "center",
      search: false,
    },
    {
      title: '核销门店',
      align: "center",
      dataIndex: 'url',
      search: false,
    },
    {
      title: '支付状态',
      align: "center",
      dataIndex: 'status',
      search: false,
    },
    {
      title: '订单状态',
      align: "center",
      search: false,
      dataIndex: 'Order',
    },
    {
      title: '下单时间',
      align: "center",
      search: false,
      dataIndex: 'time',
    },
  ];
  const [responsive, setResponsive] = useState(false);

  const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');

  function handleChange(value) {
  }


  return (
    <Form>
      <PageContainer
        header={ {
          breadcrumb: {},
        } }
      >
        <div style={ {background: 'white', padding: '30px'} }>
          <div style={ {background: 'white', display: "flex"} }>
            <ProFormRadio.Group

              label="核销日期："
              radioType="button"
              fieldProps={ {
                value: formLayout,
                onChange: (e) => setFormLayout(e.target.value),
              } }
              options={['全部', '今天', '昨天', '最近7天', '最近30天', '本月', '本年']}
            />
            <div style={ {marginLeft: "15px"} }>
              <ProFormDatePicker
                name="date"
                fieldProps={ {
                  format: 'YY-MM',
                  placeholder: '自定义时间'
                } }
              />
            </div>
          </div>
          <div style={ {display: "flex", alignItems: 'center',} }>
            <div>筛选条件：</div>
            <Space direction="vertical" style={ {width: '300px'} }>
              <Input addonBefore={selectBefore} placeholder="请输入姓名,电话,订单ID"/>
            </Space>
          </div>

          <div style={ {display: 'flex', alignItems: 'center', marginTop: '30px'} }>
            <div>选择门店：</div>
            <Select defaultValue="1" style={ {width: 300}} onChange={handleChange} >
              <Option value="1">请选择</Option>
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
            <div style={ {marginLeft: '40px'} }>
              <Button type="primary">搜索</Button>
              <Button style={ {marginLeft: '20px'} }>刷新</Button>
            </div>
          </div>
        </div>

        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive(offset.width < 596);
          }}
        >
          <div style={ {marginTop: '20px'} }>
            <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
              <StatisticCard style={ {borderRight: '10px solid #f0f2f5'} }
                             statistic={ {
                               title: '订单数量',
                               value: 2176,
                               icon: (
                                 <img
                                   style={imgStyle}
                                   src="https://i.loli.net/2021/09/06/Ki3HtbpIaz4sl9M.png"
                                   alt="icon"
                                 />
                               ),
                             } }
              />
              <StatisticCard style={ {borderRight: '10px solid #f0f2f5'} }
                             statistic={ {
                               title: '订单金额',
                               value: 475,
                               icon: (
                                 <img
                                   style={imgStyle}
                                   src="https://i.loli.net/2021/09/04/k5eaRbruv9CnfXF.png"
                                   alt="icon"
                                 />
                               ),
                             } }
              />
              <StatisticCard style={ {borderRight: '10px solid #f0f2f5'} }
                             statistic={ {
                               title: '今日订单数量',
                               value: 87,
                               icon: (
                                 <img
                                   style={imgStyle}
                                   src="https://i.loli.net/2021/09/04/4mGadHsMXk6P8fD.png"
                                   alt="icon"
                                 />
                               ),
                             } }
              />
              <StatisticCard style={ {borderRight: '10px solid #f0f2f5'} }
                             statistic={ {
                               title: '今日支付金额',
                               value: 1754,
                               icon: (
                                 <img
                                   style={imgStyle}
                                   src="https://i.loli.net/2021/09/04/e3MkDliAKYHX1Wr.png"
                                   alt="icon"
                                 />
                               ),
                             } }
              />
            </StatisticCard.Group>
            <div>
              <ProTable
                style={ {marginTop: '30px'} }
                search={false}
                options={false}
                columns={columns}
                editable={ {
                  type: 'multiple',
                } }
                rowKey="id"
                pagination={ {
                  pageSize: 5,
                } }
                dateFormatter="string"
              />
            </div>
          </div>
        </RcResizeObserver>
      </PageContainer>
    </Form>
  );
};
